<template>
	<div class="leftbar-container panel-box-warp">
		<div class="panel-box">
			<div class="category-list">
				<div class="item-box" v-for="(item, index) of decorators" :key="index">
					<h3>{{item.title}}</h3>
					<div class="child-list">
						<draggable class="drag-area list-group" :list="item.children" item-key="id" :clone="cloneDecorator"
							:group="{ name: 'page-edit', pull: 'clone', put: false }" :sort="false">
							<template #item="{ element }">
								<div  class="child-item list-group-item">
									<div class="child-item-warp">
										<div class="content-box">
											<i :class="element.icon" aria-hidden="true"></i>
											<span>{{element.title}}</span>
										</div>
									</div>
								</div>
							</template>
						</draggable>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive } from 'vue';
import { decorators } from '/@/views/decorator/components/leftBar/mock';
import draggable from 'vuedraggable';
export default {
	name: 'decorator/leftbar/index',
	components: { draggable },
	setup() {
		const state = reactive({
			decorators: decorators,
		});

		const cloneDecorator = (item) => {
			return JSON.parse(JSON.stringify(item))
		};
		
		return {
			cloneDecorator,
			...toRefs(state),
		};
	},
}
</script>

<style lang="scss" scoped>
.leftbar-container{
	overflow-y: auto;
	max-height: calc(100vh - 260px);
	scrollbar-width: thin;
	.panel-box-warp {
		position: relative;
		height: 100%;
	}
	
	.panel-box {
		min-height: 100%;
		display: flex;
		overflow: hidden;
		transition: 0.2s width ease;
	
		.componentList {
			width: 64px;
			padding: 17px 0;
			text-align: center;
	
			li {
				position: relative;
				margin-bottom: 18px;
	
				.iconfont {
					font-size: 24px;
				}
	
				span {
					font-size: 12px;
					display: block;
				}
	
				&.on,
				&:hover {
					color: #409EFF;
	
					:after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 2px;
						height: 100%;
						background-color: #409EFF;
					}
				}
			}
		}
	
		.category-list {
			.item-box {
				h3 {
					padding-left: 20px;
					height: 35px;
					line-height: 35px;
					font-size: 16px;
					color: #333333;
					position: relative;
	
					&:before {
						content: '';
						border-left: 5px solid #409EFF;
						border-top: 4px solid transparent;
						border-bottom: 4px solid transparent;
						position: absolute;
						left: 10px;
						top: 50%;
						margin-top: -4px;
					}
				}
	
				.child-list {
					font-size: 14px;
					color: #333333;
	
					.list-group {
						display: flex;
						flex-wrap: wrap;
	
						:hover {
							background-color: #a0cfff;
							color: #ffffff;
							border-radius: 5px;
						}
	
						.child-item-warp {
							height: 80px;
						}
	
						.child-item {
							margin: 5px;
							width: 80px;
	
							.content-box {
								border: 1px solid #409EFF;
								border-radius: 5px;
								height: 80px;
								display: flex;
								flex-flow: column;
								align-items: center;
								justify-content: center;
								text-align: center;
								cursor: move;
	
								.iconfont {
									font-size: 30px;
								}
	
								span {
									margin-top: 5px;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.btnToggle {
		width: 20px;
		height: 66px;
		background-color: #fff;
		border-radius: 0 20px 20px 0;
		position: absolute;
		right: -20px;
		top: 50%;
		margin-top: -33px;
		display: flex;
		align-items: center;
		cursor: pointer;
		z-index: 9;
	
		.icon-arrow-left {
			display: none;
		}
	
		&.on {
			.icon-arrow-left {
				display: block;
			}
	
			.icon-arrow-right {
				display: none;
			}
		}
	}
}
</style>


